<template>
	<div class="my-tabel">
		<!-- 搜索框+按钮 -->
		<el-row>
			<el-col :span="22">
				<el-input
					@keyup.native.13="filterUser"
					v-model="value"
					placeholder="查询的人名"
					suffix-icon="el-icon-search"
				></el-input>
			</el-col>
			<el-col :span="2">
				<el-button @click="filterUser" type="primary">搜索</el-button>
			</el-col>
		</el-row>

		<!-- 表格：嵌套表格  
     -->
		<el-table
			:data="tableData.filter((data) => !value || data.name.includes(value))"
		>
			<!-- 从一级打开二级 -->
			<el-table-column type="expand">
				<!-- 二级的表格 -->
				<template slot-scope="props">
					<el-table :data="props.row.dateArr" style="width: 100%">
						<el-table-column prop="date" label="日期"> </el-table-column>
						<el-table-column prop="grade" label="分数"> </el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<!-- 下面是一级的表格 -->

			<el-table-column prop="date" label="日期"></el-table-column>

			<el-table-column prop="name" label="姓名"></el-table-column>

			<el-table-column
				header-align="center"
				align="center"
				prop="grade"
				label="等级"
			>
			</el-table-column>

			<el-table-column
				header-align="center"
				align="center"
				prop="average"
				label="平均分"
			>
			</el-table-column>

			<el-table-column
				header-align="center"
				align="center"
				prop="totalScore"
				label="总分"
			>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import datas from './data'
export default {
	mounted() {
		// ajax请求
		setTimeout(() => {
			this.tableData = datas
		}, 1500)
	},
	data() {
		return {
			value: '',
			// 表格的数据一开始空的
			tableData: [],
		}
	},
	methods: {
		// 过滤用户
		filterUser() {
			// 从数组里找出一条数据
			const data = this.tableData.filter((item) => {
				if (item.name.search(this.value) !== -1) {
					return item
				}
			})
			console.log(data)
		},
	},
}
</script>